/**
 * 事件：
 *  React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：
      ● React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
      ● 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

    解决事件处理函数中 this 指向 undefined 的四种方案：

      1. 在 jsx 中，通过 bind 来修改 this 指向
      2. （推荐）提前在 构造函数中 通过 bind 来修改 this 指向
      3. 在 jsx 中，直接使用箭头函数来做为事件处理函数，然后在箭头函数内部调用抽离的普通函数
      4. （推荐）使用 箭头函数 + public class fileds 语法来定义这个事件处理函数。
 */

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";

// 引入全局样式
import "./index.css";

ReactDOM.createRoot(document.querySelector("#root")).render(<App />);

// class Person {
//   constructor() {
//     // 下面代码，是给 实例对象本身添加了一个 fn1 方法，内容是原型上的fn1绑定好this之后返回的一个新方法
//     // this.fn1 = this.fn1.bind(this);
//   }

//   fn1() {
//     console.log("fn1", this);
//   }
// }

// const p1 = new Person();
// p1.fn1(); // fn1 中的 this 指向是正确的，这时它只是个普通函数，谁调用就指向谁

// 构造函数中，没有提前绑定的情况
// const abcd = p1.fn1;
// abcd(); // fn1 中的 this 指向是 错误的。 undefined

// 构造函数中，做了提前绑定的情况
// const abcd = p1.fn1;
// abcd(); // fn1 中的 this 指向是正确的了。

// const abcd = () => {
//   p1.fn1();
// };
// abcd();
